<template>
  <mt-popup v-model="visible" position="bottom" style="width:100%;">
    <input type="hidden" :value="value">
    <div class="mint-datetime">
      <mt-picker class="mint-datetime-picker"
                 :slots="slots"
                 value-key="region_name"
                 :visible-item-count="visibleItemCount"
                 @change="onValuesChange"
                 showToolbar>
          <span class="mint-datetime-action mint-datetime-cancel"
                @click="handleClose">{{ cancelText }}</span>
        <span class="mint-datetime-action mint-datetime-confirm"
              @click="fillAddress">{{ confirmText }}</span>
      </mt-picker>
    </div>
  </mt-popup>
</template>

<script>
  /**
   * @desc 地区三级联动选择组件
   * @param [cancelText] 取消按钮文本
   * @param [confirmText] 完成按钮文本
   * @param [visibleItemCount] 显示几行
   * @param [value] v-model boolean用来控制隐藏和显示
   *
   * @event [pickerClose] 关闭按钮触发事件
   * @event [complete] 确认按钮触发事件
   */
  import {address, slots} from '../../assets/js/zone'

  let components = {};
  export default {
    name: 'AddrPicker',
    components: components,
    props: {
      cancelText: {
        type: String,
        default: '取消'
      },
      confirmText: {
        type: String,
        default: '确定'
      },
      visibleItemCount: {
        type: Number,
        default: 5
      },
      value: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        slots: slots,
        address: '',
        temp_addr: '',
        addr_id: [],
        visible: false
      };
    },
    methods: {
      handleClose() {
        this.$emit('pickerClose', (this.visible = false))
      },
      fillAddress(evt) {
        // 填入省市区
        this.handleClose();
        if (this.address) {
          this.$emit('complete', this.address, this.addr_id);
        }
      },
      initAddress() {
        this.slots[0].values = address.filter((item, index) => {
          if (item.parent_id === 1) {
            return item;
          }
        });
      },
      onValuesChange(picker, values) {
        // 防止没有省份时报错
        if (values[0]) {
          this.slots[1].values = address.filter((item, index) => {
            if (item.parent_id === values[0].region_id) {
              return item;
            }
          });
        }
        // 防止没有市时报错
        if (values[1]) {
          this.slots[2].values = address.filter((item, index) => {
            if (item.parent_id === values[1].region_id) {
              return item;
            }
          });
        }
        // 防止没有区时报错
        if (values[2]) {
          // 这里可以指定地址符
          this.address = values[0].region_name + '' + values[1].region_name + '' + values[2].region_name;
          this.addr_id.push(values[0].region_id);
          this.addr_id.push(values[1].region_id);
          this.addr_id.push(values[2].region_id);
        }
      }
    },
    mounted() {
      this.initAddress();
    },
    watch: {
      value(val) {
        this.visible = val;
      },
      visible(val) {
        this.$emit('input', val);
      }
    }
  };
</script>
